<template>
  <div class="container">
    <PageHeader />
    <Menu />
    <div class="inner w">
      <h5>您是不是想找：</h5>
      <ul>
        <li><el-link :underline="false">男装一套搭配帅气成熟</el-link></li>
        <li><el-link :underline="false">男装一套搭配帅气成熟</el-link></li>
        <li><el-link :underline="false">男装一套搭配帅气成熟</el-link></li>
        <li><el-link :underline="false">男装一套搭配帅气成熟</el-link></li>
        <li><el-link :underline="false">男装一套搭配帅气成熟</el-link></li>
        <li><el-link :underline="false">男装一套搭配帅气成熟</el-link></li>
      </ul>
    </div>
    <div class="sortbar w">
     <div class="sort-inner">
       <ul class="sorts">
         <li><el-link :underline="false">综合排序</el-link></li>
         <li><el-link :underline="false">销量</el-link></li>
         <li><el-link :underline="false">信用</el-link></li>
         <li>
           <el-dropdown>
             <el-link :underline="false">价格
               <i class="el-icon-arrow-down el-icon--right"></i>
             </el-link>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>价格从低到高</el-dropdown-item>
                <el-dropdown-item>价格从高到低</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
         </li>
       </ul>
       <div class="prices">
        <ul>
          <li>
            <el-input
                size="mini"
                prefix-icon="iconfont icon-rmb"
                v-model="prices1">
              </el-input>
              -
              <el-input
                size="mini"
                prefix-icon="iconfont icon-rmb"
                v-model="prices2">
              </el-input>
          </li>
          <li> <el-button size="mini" type="primary">确定</el-button></li>
        </ul>
       </div>
     </div>
     <div class="filters">
       <el-checkbox-group v-model="checkList">
        <el-checkbox label="包邮"></el-checkbox>
        <el-checkbox label="正品保障"></el-checkbox>
        <el-checkbox label="自营"></el-checkbox>
        <el-checkbox label="7天无理由"></el-checkbox>
      </el-checkbox-group>
     </div>
    </div>
    <Goods class="w"/>
    <div class="paging w">
       <el-pagination
       background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import PageHeader from '@/mall/views/components/PageHeader'
import Menu from '@/mall/views/components/Menu'
import Goods from '@/mall/views/components/Goods'


  export default {
    name: 'Search',
    components: {
    PageHeader,
    Menu,
    Goods
  },
    data() {
      return {
        prices1:'',
        prices2:'',
        checkList:[],
        currentPage3: 5,
      };
    },
    created() {},
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }, 
  };
</script>
<style lang="scss" scoped>
.w{
   width: 1200px;
  margin:10px auto;
}
.container{
  // height: 100vh;
  // background: #fff;
}
.inner{
  display:flex;
  align-items: center;
  background: #fff;
  color: #9a9a9a;
  border: 1px solid #e8e8e8;
  // border-radius: 0px  0px 8px 8px;
  border-radius: 8px;
  padding: 0 20px;
  h5{
    margin: 0;
    width: 130px;
  }
  ul{
    display:flex;
    white-space: nowrap;
    overflow: hidden;
    li{
      margin-right: 20px;
    }
  }
}
.el-link.el-link--default{
    font-size:13px;
    font-weight:400;
  }
.sortbar{
  display:flex;
  justify-content: space-between;
 align-items: center;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius:8px;
  padding: 0 20px;
}
.sort-inner{
  display:flex;
  .sorts{
    display:flex;
    margin: 0;
    li{
      padding: 10px 0;
      margin-right: 20px;
    }
  }
  .prices{
  line-height: 36px;
  ul:hover{
     .el-button{
    visibility:visible;
  }
  }
  ul{
    display:flex;
     margin: 0;
    align-items: center;

    li{
      margin-right: 10px;
    }
  }
  .el-input{
    width: 70px;
  }
  ::v-deep.el-input--mini .el-input__inner {
    height: 25px;
    line-height: 25px;
}
::v-deep .el-input--prefix .el-input__inner {
    padding-left: 25px;
}
::v-deep.el-input__inner {
  padding: 0;
}
  .el-button{
    height: 24px;
    visibility:hidden;
  }
  .el-button--mini, .el-button--mini.is-round {
    padding:6px 10px;
}
}
}
.filters{
  // line-height: 36px;
  .el-checkbox{
    font-weight:400;
  }
  ::v-deep .el-checkbox__label {
    padding-left: 5px;
    font-size: 13px;
}
}
.paging{
  display:flex;
  justify-content: center;
  margin:20px 0;
  // position: relative;
  // position:absolute;
  // left: 50%;
  // top: 50%;
  // transform: translate(25%);
}

</style>